<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>渣渣之路</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet">
	<link href="css/mycss.css" rel="stylesheet">
	<style type="text/css">
		a {
			text-decoration-line: none
		}
	</style>
</head>

<body class="mybackground" name="top" data-spy="scroll" data-target="#word_list">
	<nav id="header" class="navbar navbar-inverse">
		<!-- <header id="header"> -->
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand">渣渣之路</a>
			</div>
			<div class="navbar-collapse collapse" role="navigation">
				<ul class="nav navbar-nav">
					<li>
						<a href="/">博客</a>
					</li>
					<li>
						<a href="http://118.24.116.95:8080/MyWeb/Login.jsp" target="_blank">游戏</a>
					</li>
					<li>
						<button class="btn btn-default navbar-btn hidden">button</button>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right hidden-sm">
					<li>
						<a>关于</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- </header> -->
	</nav>


	<div class="container">
		<div id="body" class="row" style="margin-top: 100px">
			<div class="col-md-2" id="word_list_panel">
				<div class="panel panel-default mypin" style="margin-top: 100px">
					<!-- Default panel contents -->
					<div class="panel-heading text-center">文档目录</div>
					<!-- List group -->
					<div id="word_list" class="list-group">
						<!-- <a href="#" class="list-group-item active">Link</a> -->
					</div>
					<div id="word_list" class="list-group">
						<a id="returntop" class="list-group-item" href="#top">返回顶部</a>
					</div>
				</div>
			</div>
			<div class="col-md-7" id="word_div" style="border:1px solid #bfd1eb;">

			</div>
			<div class="col-md-3">
				<div class="mypin" style="margin-top: 70px">
					<div class="panel panel-default">
						<div class="panel-heading">个人资料</div>
						<div class="panel-body">我的资料</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">文章搜索</div>
						<div class="panel-body">搜索文章</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">文章分类</div>
						<div class="panel-body">文章分类</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">文章标签</div>
						<div class="panel-body">文章标签</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- 包括所有已编译的插件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="js/headroom.js"></script>
	<script src="js/jQuery.headroom.js"></script>
	<script src="js/jquery.pin.js"></script>
	<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
	<script>
		$(document).ready(function () {
			$("#header").headroom({
				onPin: function () {
					$("#returntop").show();
				},
				onUnpin: function () {
					$("#returntop").hide();
				},
				onTop: function () {
					$("#returntop").hide();
				}
			});
			$("button").click();

		});
		$("button").click(function () {
			$.ajaxSetup ({
				cache: false //close AJAX cache
				});
			$("#word_div").load("blogRequest", function () {
				$(".mypin").pin({
					containerSelector: "#body"
				});
				var padding = [10, 20, 30, 40, 50];
				$(this).find('h1,h2,h3,h4,h5,h6').each(function (index, item) {
					$('<a name="c' + index + '"></a>').insertBefore($(this));
					var headerText = $(this).text();
					var tagName = $(this)[0].tagName.toLowerCase();
					var tagIndex = parseInt(tagName.charAt(1)) - 1;
					//设置不同等级header的排列及缩进样式
					$('#word_list').append($('<a href="#c' + index + '" class="list-group-item" style="padding-left:' + padding[tagIndex] + 'px;display:block;">' + headerText + '</a>'));
				});
				if ($('#word_list').children().length > 10) {
					$("#word_list").css("height", "410px");
				}
				$("#word_list").mCustomScrollbar({
					theme: "minimal-dark"
				});
				$('[data-spy="scroll"]').each(function () {
					var $spy = $(this).scrollspy('refresh')
				})
				// $(this).find("style").append("a{text-decoration-line: none}");
			});
			$.ajaxSetup ({
				cache: true //open AJAX cache
				});
		});
	</script>
</body>

</html>